<template>
    <div style="background:#2d3a4b;height:100vh">
        <div id="box">
            <h1>在线教育网后台管理系统</h1>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <!-- <el-input v-model="ruleForm.password"></el-input> -->
                    <el-input placeholder="请输入密码" v-model="ruleForm.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password2">
                    <!-- <el-input v-model="ruleForm.password2"></el-input> -->
                    <el-input placeholder="请再输入密码" v-model="ruleForm.password2" show-password></el-input>
                </el-form-item>
                <el-form-item label="身份" prop="identity">
                    <el-select v-model="ruleForm.identity" placeholder="请选择身份">
                        <el-option label="管理员" value="管理员"></el-option>
                        <el-option label="普通员工" value="普通员工"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary"  @click="submitForm('ruleForm')">注册</el-button>
                    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                </el-form-item>
            </el-form>
            <p style="color:#fff;" @click="tiaoDeng()" >已有账户！点击去登陆</p>
        </div>
    </div>
</template>
<script>
import {getZhu} from '../untils/api'
export default {
    data() {
        return {
            ruleForm: {
                name: '',
               email:'',
               password:'',
               password2:'',
               identity:'',
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                   
                ],
                email: [
                    { required: true, message: '请填写邮箱', trigger: 'blur' },
                   
                ],
                password2: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' }
                ],
                identity: [
                    { required: true, message: '请选择身份', trigger: 'change' }
                ],
               
            }
        }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            getZhu(this.ruleForm).then(res=>{
                this.$message({
                    showClose: true,
                    message: '注册成功',
                    type: 'success'
                });
            })
          } else {
            alert('请检查你的错误')
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      tiaoDeng(){
        this.$router.push('login')
      }
    }
}
</script>
<style lang="scss">
#box {
    width: 600px;
    height: 400px;
    position: fixed;
    color: #fff;
    top: calc(50% - 200px);
    left: calc(50% - 300px);

    h1 {
        color: #fff;
        margin-bottom: 40px;
        text-align: center
    }
    p {
        text-align: end
    }
}
.el-form-item__label{
    color: #fff;
}
.el-button{
    width: 100%;
}
</style>